<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="renderer" content="webkit">
<meta name="msapplication-tap-highlight" content="no" /><!-- winphone 点击无高光 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>SwiperImg</title>

<link rel="stylesheet" href="lightswiper.css">
<script src="lightswiper.js"></script>

</head>
<body>
<div class="light-swiper" id="light-swiper1"></div>
<div class="light-swiper" id="light-swiper2"></div>

<script>
    //稍后放到vue里试试
function SwiperImg(eleRender,arrSwiperImg) {
    var strSwiper = ''
    var strSwiperDot = ''
    arrSwiperImg.forEach(function (v, k) {
        strSwiper += tplSwiper(v, k)
        strSwiperDot += tplSwiperDot(k)
    })

    var _elSwiperWrap=document.createElement('div')
    _elSwiperWrap.className='swiper-wrap'
    document.querySelector(eleRender).appendChild(_elSwiperWrap)

    var _elDotWrap=document.createElement('div')
    _elDotWrap.className='dot-wrap'
    document.querySelector(eleRender).appendChild(_elDotWrap)

    _elSwiperWrap.innerHTML=strSwiper
    _elDotWrap.innerHTML=strSwiperDot

    function tplSwiper(data, idx) {
        var cc = '<div class="swipe-item"><a href="'+data.url+'"><img class="" data-idx="' + idx + '" src="' + data.banner + '" ></a></div>'
        return cc
    }
    function tplSwiperDot(idx) {
        var activeswiper = idx == 0 ? 'activeswiper' : ''
        var cc = '<div class="dot"><span class="' + activeswiper + '"></span></div>'
        return cc
    }
    return new lightSwiper(document.querySelector(eleRender), {
        continuous: true,
        auto: 3000,
        callback: function (index, el) {
            var dots = document.querySelectorAll(eleRender+' .dot')
            for (var i = 0; i < dots.length; i++) {
                (function (i) {
                    var dot = dots[i].querySelector('span')
                    if (i == index) {
                        dot.className = 'activeswiper'
                    } else dot.className = ''
                })(i)
            }
        }
    });
}
/*举例*/
var arrkd = [
    {
        url: 'https://www.acai365.com/cstore/index.html',
        banner:'http://cdnimg.acai365.com/uploads/202112/e927f254e20e4c2943.jpg'
    },
    {
        url: 'https://www.acai365.com/cstore/index.html',
        banner:'https://wx2.sinaimg.cn/large/c5131475ly1gxfnm6r734j20qo0b47d9.jpg'
    }
]
var sImg=SwiperImg("#light-swiper1", arrkd)
//sImg.kill()
SwiperImg("#light-swiper2", arrkd)

</script>
</body>
</html>
